<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>excel-edit</title>
  <style>
  table{
    border-collapse:collapse;
  }
  table,th,td{
    border: 1px solid black;
  }
  </style>
</head>
<body>
  <div id="app"></div>

  <script type="text/javascript" src="../js/react.js"></script>
  <script type="text/javascript" src="../js/react-dom.js"></script>
  <script type="text/javascript">
    var header = ["Book","Author","Language"];
    var exceldata = [["Think in java","janmes","JAVA"],["C++ Permier","zhang san","C++"],["python编程思想","wang wu","python"]];

    var excel = React.createClass({
      displayName: 'excel',
      propTypes: {
        header: React.PropTypes.array,
      },
      getInitialState: function() {
        return {
          data: this.props.initdata,
        }
      },
      render: function(){
        return (
          React.DOM.table(null,
            // thead
            React.DOM.thead(null,
              React.DOM.tr(null,
                this.props.header.map(function(title, idx){
                  return React.DOM.th({key: idx}, title);
                })
              )
            ),
            // tbody
            React.DOM.tbody(null,
              this.state.data.map(function(row, rowid){
                return React.DOM.tr({key: rowid},
                  row.map(function(cell, idx) {
                    return React.DOM.td({key: idx}, cell);
                  })
                );
              })
            )
          )
        );
      }
    });

    ReactDOM.render(
      // 用自定义组建创建
      // 直接用React.createElement(标签, 属性, 子元素),
      // React.createElement("span", null, "this is 直接创建 element"),
      React.createElement(excel, {
        header: header,
        initdata: exceldata,
      }),
      document.getElementById("app")
    )
  </script>
</body>
</html>
